import React, { Component, Fragment } from 'react';
import "./main.scss"
import { Carousel, Toast } from 'antd-mobile';
import axios from "axios"
let NewsBox = (props) => {
  return <div className="newsBox">
    <div className="newsBoxLeft">
      <img src="https://img07.jiuxian.com/bill/2017/0623/8b98053873a545399f15c8d6787fb688.jpg" alt="" />
    </div>
    <div className="newsBoxRight">
      <Carousel className="my-carousel"
        vertical
        dots={false}
        dragging={false}
        swiping={false}
        autoplay
        infinite
      >
        {props.lunbo && props.lunbo.map(v => (
          <div className="v-item" key={v.url}><a href={v.url}>{v.text}</a></div>
        ))}
      </Carousel>
    </div>
  </div>
}
let SpikeBox = (props) => {
  return (<div className="spikeBox">
    <div className="spikeTit">
      <h3>掌上秒拍</h3>
      <div className="lastTime" remaintime="12962">
        <span>距结束</span>
        <i className="hours">{props.hours}</i>
        <em>:</em>
        <i className="minutes">{props.minutes}</i>
        <em>:</em>
        <i className="seconds">{props.seconds}</i>
      </div>
      <a id="__home_mp-more" href="#" className="more">
        <span>更多商品的你来抢！</span>
        <i className="jx-sprite-icon"></i></a>
    </div>
    <div className="spikeWrap">
      <div className="swiper-container swiper-container-horizontal">
        <ul className="swiper-wrapper" ref={props.proListRes}>
          {props.killProList && props.killProList.map(v => (
            <li className="swiper-slide swiper-slide-active" key={v.proImg}>
              <a href="#">
                <div className="ulImg">
                  <img src={v.proImg} alt=""></img>
                </div>
                <span className="name">{v.proName}</span>
                <span className="price">¥{v.proPrice}</span>
                <del className="y-price">¥{v.jxPrice}</del>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </div>)
}
let PubBanner = (props) => {
  return (
    <Fragment>
      {
        props.listImg.map(v => (
          <div className="pubBanner" key={v.id}>
            <img src={v.ref} alt="" />
          </div>
        ))
      }
    </Fragment>
  )
}
let JxAdBox = (props) => {
  return <div className="jxAdBox">
    <div className="jxAdBoxLeft">
      <img src="https://img08.jiuxian.com/bill/2020/0324/1b3fe0a9ca004e0abb6a0ff8de79946c.jpg" alt="" />
    </div>
    <div className="jxAdBoxRigth">
      <img src="https://img07.jiuxian.com/bill/2020/0907/1aa816ae3ea4498189f6c12aa72864b5.jpg" alt="" />
      <img src="https://img10.jiuxian.com/bill/2020/0326/5b59b84100004bab9340b9a56418b684.jpg" alt="" />
    </div>
  </div>
}
let PubBanner2 = (props) => {
  return (
    <Fragment>
      {
        props.listImg2.map(v => (
          <div className="pubBanner" key={v.id}>
            <img src={v.ref} alt="" />
          </div>
        ))
      }
    </Fragment>
  )
}
class Main extends Component {
  constructor(props) {
    super(props);
    this.proListRes = React.createRef()
    this.params = {
      pagenum: 1,
      tabnum: 1
    }
  }
  state = {
    lunbo: [
      { url: "0", text: "1499飞天限量抢" },
      { url: "1", text: "贵州茅台酒抢购公示" },
      { url: "2", text: "CLUB尊享盛典" },
      { url: "3", text: "爆品腰斩日  限时24小时" },
      { url: "4", text: "温馨提示 谨防上当受骗 造成财产损失" },
      { url: "5", text: "水井坊品牌特卖中奖名单" },
    ],
    killProList: null,
    listImg: [
      { id: 1, ref: "https://img08.jiuxian.com/bill/2020/0321/c82dd3af63c145a9b3f49f09acfee1fb.jpg" },
      { id: 2, ref: "https://img08.jiuxian.com/bill/2020/0921/a2d12d1261a746eb88fa7b4f735ab8d5.jpg" },
      { id: 3, ref: "https://img06.jiuxian.com/bill/2020/0922/fe16958e9f1345a1a1513873f3e6f1ec.jpg" },
      { id: 4, ref: "https://img08.jiuxian.com/bill/2020/0915/b8cee8529b6b476ebdfc688da7a6f957.jpg" },
      { id: 5, ref: "https://img09.jiuxian.com/bill/2020/0914/ce9df2db95224267919e7f3640738694.jpg" },
    ],
    listImg2: [
      { id: 1, ref: "https://img08.jiuxian.com/bill/2020/0917/160d215bdaa34bfd84db2a1ba7fbc93b.jpg" },
      { id: 2, ref: "https://img06.jiuxian.com/bill/2020/0923/9df23b76df5645499b5d92eb0aeb38a4.png" },
      { id: 3, ref: "https://img06.jiuxian.com/bill/2020/0921/a7ac435970944870bb8e1d2060edfc98.jpg" },
      { id: 4, ref: "https://img08.jiuxian.com/bill/2020/0807/6c1f5621cbe74695a30c35825c649b80.jpg" },
    ],
    startDateFour: "2020-09-24 10:00:00",
    startDateOne: "2020-09-23 15:00:00",
    startDateThree: "2020-09-24 07:00:00",
    startDateTwo: "2020-09-23 19:00:00",
    hours: "00",
    minutes: "00",
    seconds: "00"

  };
  // 倒计时
  countDown = (time1, time2, time3, time4) => {
    //当前时间戳
    let currentTime = +new Date();
    // oneTime
    let oneTime = +new Date(time1);
    // twoTime
    let twoTime = +new Date(time2);
    // threeTime
    let threeTime = +new Date(time3);
    // fourTime
    let fourTime = +new Date(time4);
    if (currentTime < oneTime) {
      let timeDifference = oneTime - currentTime;
      this.formatDuring(timeDifference);
    } else if (currentTime < twoTime) {
      let timeDifference = twoTime - currentTime;
      this.formatDuring(timeDifference);
    } else if (currentTime < threeTime) {
      let timeDifference = threeTime - currentTime;
      this.formatDuring(timeDifference);
    } else if (currentTime < fourTime) {
      let timeDifference = fourTime - currentTime;
      this.formatDuring(timeDifference);
    } else {
      axios
        .get("https://m.jiuxian.com/m_v1/promote/qgajax.do?t=1600842145052")
        .then((res) => {
          this.setState({
            startDateFour: res.data.seckillDate.startDateFour,
            startDateOne: res.data.seckillDate.startDateOne,
            startDateThree: res.data.seckillDate.startDateThree,
            startDateTwo: res.data.seckillDate.startDateTwo,
          }, () => {
            clearInterval(this.Time);
            this.Time = setInterval(() => {
              this.countDown(this.state.startDateOne, this.state.startDateTwo, this.state.startDateThree, this.state.startDateFour)
            }, 1000)
          });
        }).catch(err => console.log(err));
    }
  }
  // 时分秒
  formatDuring = (mss) => {
    let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, "0");
    let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, "0");
    let seconds = parseInt((mss % (1000 * 60)) / 1000).toString().padStart(2, "0");
    this.setState({
      hours,
      minutes,
      seconds
    })
  }

  // 防抖非立即执行版
  debounce = (fn, wait) => {
    let time = null;
    return function () {
      let _this = this;
      if (time) {
        clearTimeout(time);
      }
      time = setTimeout(fn.bind(_this), wait);
    }
  }
  /* 追加产品的列表 */
  getkillProList = () => {
    if (this.pageCount && this.params.pagenum <= this.pageCount) {
      axios
        .get("https://m.jiuxian.com/m_v1/promote/qgajax.do?t=1600842145052", {
          params: this.params
        })
        .then((res) => {
          this.pageCount = res.data.pageCount;
          this.totalCount = res.data.totalCount;
          this.params.pagenum++;
          this.setState({
            killProList: [...this.state.killProList, ...res.data.killProList], // 追加数据
          });
        }).catch(err => console.log(err));
    } else {
      Toast.info("已经是最后一条数据啦", 1);
    }
  };
  // 判断列表的滚动是否触底
  handleScroll = () => {
    if (this.proListRes.current) {
      let parentElement = this.proListRes.current;
      let clientWidth = parentElement.clientWidth; // 窗口的高度
      let scrollWidth = parentElement.scrollWidth; //列表的高度
      let scrollLeft = parentElement.scrollLeft; // 已经滚动的距离
      // 发请求 或者最新的列表数据
      if (scrollWidth - clientWidth - scrollLeft <= 100) {
        this.getkillProList();
      }
    }
  }
  componentWillUnmount () {
    // 解除事件绑定
    this.proListRes.current.removeEventListener("scroll", this.debounce);
    // 清除定时器
    clearInterval(this.Time);
  };
  componentDidMount () {
    if (!this.pageCount) {
      axios
        .get("https://m.jiuxian.com/m_v1/promote/qgajax.do?t=1600842145052", {
          params: this.params
        })
        .then((res) => {
          this.pageCount = res.data.pageCount;
          this.totalCount = res.data.totalCount;
          this.params.pagenum++;
          this.setState({
            killProList: res.data.killProList,
            startDateFour: res.data.seckillDate.startDateFour,
            startDateOne: res.data.seckillDate.startDateOne,
            startDateThree: res.data.seckillDate.startDateThree,
            startDateTwo: res.data.seckillDate.startDateTwo,
          }, () => {
            this.countDown(this.state.startDateOne, this.state.startDateTwo, this.state.startDateThree, this.state.startDateFour)
          });
        }).catch(err => console.log(err));
      this.proListRes.current.addEventListener("scroll", this.debounce(this.handleScroll, 100));
      this.Time = setInterval(() => {
        this.countDown(this.state.startDateOne, this.state.startDateTwo, this.state.startDateThree, this.state.startDateFour)
      }, 1000)
    }
  }
  render () {
    return (
      <div className="jxHomeMain">
        <NewsBox {...this.state}></NewsBox>
        <SpikeBox {...this.state} proListRes={this.proListRes}></SpikeBox>
        <PubBanner {...this.state}></PubBanner>
        <JxAdBox></JxAdBox>
        <PubBanner2 {...this.state}></PubBanner2>
      </div>
    );
  }
}

export default Main;

